<!--
 * @Author: boyyang
 * @Date: 2022-01-23 19:59:05
 * @LastEditTime: 2022-02-19 21:15:01
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\toolTip\index.vue
-->

<template>
    <div class="tool-wrapper">
        <slot name="icon"></slot>

        <div class="tool-tip-msg" v-if="props.text && props.text !== ''">{{ props.text }}</div>
    </div>
</template>

<script lang="ts" setup>
interface IToolTipProps {
    text?: string;
}

const props = withDefaults(defineProps<IToolTipProps>(), {

})
</script>

<style scoped lang="scss">
.tool-wrapper {
    position: relative;

    &:hover {
        .tool-tip-msg {
            display: block;
        }
    }
    .tool-tip-msg {
        display: none;
        position: absolute;
        padding: 8px 15px;
        border-radius: 5px;
        background-color: #1bd1a5;

        transition: all 0.5s linear;

        margin-top: 10px;

        color: rgb(0, 0, 0);

        white-space: nowrap;

        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: whitesmoke;

        // position: relative;

        &:before {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            top: -18px;
            left: 3px;
            border: solid;
            border-width: 10px;
            border-color: transparent transparent #1bd1a5 transparent;
        }
    }
}
</style>
